<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 联想
  Date: 2020/3/27
  Time: 22:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>jQuery按钮控制时间轴滚动</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/timeLine/css/public.css">

    <script src="${pageContext.request.contextPath}/static/timeLine/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/timeLine/js/jquery_flexslider.js"></script>

</head>
<body>
<div class="about-history" id="fzlc">
    <header class="about-title title-white">
        <h3 class="wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">时间轴</h3>
        <p class="wow fadeInUp" data-wow-delay=".2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">HISTORY</p>
    </header>
    <div class="about-history-list wow zoomIn" data-wow-delay=".4s" style="visibility: visible; animation-delay: 0.4s; animation-name: zoomIn;">
        <div class="flex-viewport" style="overflow: hidden; position: relative;">
            <ul class="slides clearfix list" style="width: 2600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">


                <c:forEach var="activity" items="${list}">
                    <li style="width: 253px; float: left; display: block;">
                        <div class="item">
                            <a href="${pageContext.request.contextPath}/admin/toViewActivityDescription?activityNo=${activity.activityNo}&activityName=${activity.activityName}">
                            <h3>${activity.activityReleaseTime}</h3>
                            </a>
                            <div class="desc">
                                <p>活动编号:${activity.activityNo}</p>
                                <p>活动名称:${activity.activityName}</p>
                                <p>活动时间:${activity.activityTime}</p>
                                <p>活动时长:${activity.activityStudyTime}</p>
                                <p>活动分值:${activity.activityScore}</p>
                                <p>负责人工号:${activity.teacherNo}</p>
                                <p>负责人:${activity.teacherName}</p>
                                <p>活动人数:${activity.activityPeopleNumber}</p>
                                <p>剩余名额:${activity.activityQuota}</p>
                                <p>活动发布时间:${activity.activityReleaseTime}</p>
                                <p>
                                    活动状态:

                                    <c:if test="${nowTime > activity.activityTime}">
                                        已过期
                                    </c:if>

                                    <c:if test="${nowTime < activity.activityTime}">
                                        <c:choose>
                                            <c:when test="${activity.activityStatus == 'T'}"><!-- 如果 -->
                                                生效中
                                            </c:when>
                                            <c:otherwise> <!-- 否则 -->
                                                已失效
                                            </c:otherwise>
                                        </c:choose>
                                    </c:if>

                                </p>

                            </div>
                        </div>
                    </li>
                </c:forEach>


                <li style="width: 253px; float: left; display: block;"></li>
            </ul>
        </div>
        <ul class="flex-direction-nav">
            <li class="flex-nav-prev"><a class="flex-prev" href="#">&lt;</a></li>
            <li class="flex-nav-next"><a class="flex-next" href="#">&gt;</a></li>
        </ul>
    </div>
</div>

<script>
    $(function(){
        if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
            //phone
        }else{
            //PC
            $(".about-history-list").flexslider({animation:"slide",slideshow:false,controlNav:false,itemWidth:253,itemMargin:31,prevText:"<",nextText:">",move:1});
        }
    });
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>
